<template>
  <nui-custom bgColor="bg-white" :isBack="true">
    <block v-slot:backText>
      <text class="text-back " >
        返回
      </text>
    </block>

    <block v-slot:content>
      <text class="text-title">
        预览
      </text>
    </block>
  </nui-custom>
  <view>
    <view>
      <view class="padding-sm bg-gray">
        <text class="cuIcon-discoverfill">

        </text>
        选择封面
      </view>

    </view>
    <view class="swiper">
      <swiper style="height: 200px;width: 100%" :pagination-visible="true" pagination-color="#426543"
      >
        <swiper-item v-for="(item,index) in imgList">
          <image style="width: 100%" :src="item.attrs.src" mode="aspectFill"/>
        </swiper-item>


      </swiper>

    </view>
    <view>
      <view class="padding-sm bg-gray">
        <text class="cuIcon-discoverfill">

        </text>
        选择标签
      </view>

    </view>
    <view class="padding flex-wrap" style="height: auto">

      <view v-for="(item,index)  in tags" class="cu-tag round margin-xs"
            @tap="item.select=!item.select"
            :class="item.select?'bg-green':'none'"

      >
        {{ item.title }}
      </view>


    </view>

    <view>
      <view class="padding-sm bg-gray">
        <text class="cuIcon-discoverfill">

        </text>
        选择地区
      </view>

    </view>
    <uni-data-picker class="text-right padding bg-white" :localdata="dataTree" v-slot:default="{data, error, options}"
                     popup-title="请选择所在地区">
      <view v-if="error" class="error">
        <text>{{ error }}</text>
      </view>

      <view v-else-if="data.length" class="flex justify-end">
        {{ data.map(item => item.text).join('/') }}
      </view>
      <view v-else>
        <text>请选择地区</text>
      </view>
    </uni-data-picker>
  </view>

  <view class="footer flex">
    <view class="bg-gray basis-df cu-btn padding margin-right-xs radius-xs" @tap="navBack">
      上一步
    </view>
    <view class="bg-green basis-df cu-btn padding  radius-xs" @tap="publish">
      发布
    </view>
  </view>
</template>

<script>
import province from "./province";
import {onLoad} from "@dcloudio/uni-app";
import {reactive, ref, toRefs} from "vue";
import {parse} from 'node-html-parser';

export default {
  data() {
    return {


      tags: [

        {
          title: "我的捏",
          select: false,
        },
        {
          title: "我的捏",
          select: false,
        }, {
          title: "我的捏",
          select: false,
        }, {
          title: "我的捏",
          select: false,
        }, {
          title: "我的捏",
          select: false,
        }, {
          title: "我的捏",
          select: false,
        },
      ],
      address: '',
      dataTree: province

    }

  },
  methods: {
    navBack() {
      uni.navigateBack()
    },
    publish() {
      uni.showToast({
        title: "发布成功"
      })
    }
  },

  setup() {
    const data
        = reactive({
      html: "",
      imgList: [],
      mainPicIndex: 0,
    })
    onLoad(option => {
      data.html = uni.getStorageSync("html")
      const root = parse(data.html);
      data.imgList = root.querySelectorAll("img")
      console.log(data.imgList)
    })

    return {
      ...toRefs(data)
    }
  }
}
</script>

<style scoped>

</style>